import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'logic.dart';

class OrderFoodPage extends StatelessWidget {
  final OrderFoodLogic logic = Get.put(OrderFoodLogic());

  @override
  Widget build(BuildContext context) {
    // 首页背景颜色
    final Color backgroundColor = Color(0xFFBE9650);
    // 卡片半透明背景色 - 与首页卡片一致
    final Color cardBackgroundColor = Color(0x60FFFFFF);

    return Scaffold(
      // 使用与首页相同的背景色
      backgroundColor: backgroundColor,
      appBar: AppBar(
        title: Text(
          '点餐',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        elevation: 0,
        backgroundColor: backgroundColor,
      ),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                // 左侧分类菜单
                Container(
                  width: 100,
                  margin: EdgeInsets.only(left: 8, top: 8, bottom: 8),
                  decoration: BoxDecoration(
                    color: cardBackgroundColor,
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Obx(() => ListView.builder(
                    itemCount: logic.categories.length,
                    itemBuilder: (context, index) {
                      return Obx(() => GestureDetector(
                        onTap: () => logic.selectCategory(index),
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 16),
                          decoration: BoxDecoration(
                            color: logic.selectedCategoryIndex.value == index
                                ? Colors.white.withOpacity(0.3)
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          margin: EdgeInsets.symmetric(vertical: 2, horizontal: 4),
                          child: Center(
                            child: Text(
                              logic.categories[index].name,
                              style: TextStyle(
                                fontWeight: logic.selectedCategoryIndex.value == index
                                    ? FontWeight.bold
                                    : FontWeight.normal,
                                color: Colors.black87,
                              ),
                            ),
                          ),
                        ),
                      ));
                    },
                  )),
                ),

                // 右侧菜品列表
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: 8),
                    decoration: BoxDecoration(
                      color: cardBackgroundColor,
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Obx(() {
                      // 显示加载中状态
                      if (logic.isLoading.value && logic.categories.isEmpty) {
                        return Center(
                          child: CircularProgressIndicator(
                            color: Colors.white,
                          ),
                        );
                      }

                      final foods = logic.getFoodsByCategory();
                      return foods.isEmpty
                          ? Center(child: Text('暂无菜品', style: TextStyle(color: Colors.black54)))
                          : ListView.builder(
                        padding: EdgeInsets.all(8),
                        itemCount: foods.length,
                        itemBuilder: (context, index) {
                          final food = foods[index];
                          return Card(
                            margin: EdgeInsets.symmetric(vertical: 6, horizontal: 4),
                            color: Colors.white.withOpacity(0.8),
                            elevation: 2,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(12),
                            ),
                            child: Padding(
                              padding: EdgeInsets.all(8),
                              child: Row(
                                children: [
                                  // 菜品图片
                                  Container(
                                    width: 80,
                                    height: 80,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                    child: ClipRRect(
                                      borderRadius: BorderRadius.circular(8),
                                      child: Image.network(
                                        food.image,
                                        fit: BoxFit.cover,
                                        loadingBuilder: (context, child, loadingProgress) {
                                          if (loadingProgress == null) return child;
                                          return Center(
                                            child: CircularProgressIndicator(
                                              value: loadingProgress.expectedTotalBytes != null
                                                  ? loadingProgress.cumulativeBytesLoaded /
                                                  loadingProgress.expectedTotalBytes!
                                                  : null,
                                              color: backgroundColor,
                                            ),
                                          );
                                        },
                                        errorBuilder: (context, error, stackTrace) {
                                          return Container(
                                            color: Colors.grey[300],
                                            child: Icon(Icons.image_not_supported, color: Colors.grey[600]),
                                          );
                                        },
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: 12),
                                  // 菜品信息
                                  Expanded(
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          food.name,
                                          style: TextStyle(
                                            fontSize: 16,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        SizedBox(height: 4),
                                        Text(
                                          food.description,
                                          style: TextStyle(
                                            fontSize: 12,
                                            color: Colors.grey,
                                          ),
                                          maxLines: 2,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                        SizedBox(height: 8),
                                        Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              '¥${food.price.toStringAsFixed(2)}',
                                              style: TextStyle(
                                                fontSize: 16,
                                                color: Colors.red,
                                                fontWeight: FontWeight.bold,
                                              ),
                                            ),

                                            // 添加到购物车按钮
                                            Row(
                                              children: [
                                                Obx(() {
                                                  final count = logic.getCartItemCount(food.id);
                                                  if (count > 0) {
                                                    return Row(
                                                      children: [
                                                        InkWell(
                                                          onTap: () => logic.decreaseCartItem(food),
                                                          child: Container(
                                                            padding: EdgeInsets.all(4),
                                                            decoration: BoxDecoration(
                                                              color: Colors.grey[200],
                                                              shape: BoxShape.circle,
                                                            ),
                                                            child: Icon(Icons.remove, size: 16),
                                                          ),
                                                        ),
                                                        Padding(
                                                          padding: EdgeInsets.symmetric(horizontal: 8),
                                                          child: Text('$count'),
                                                        ),
                                                      ],
                                                    );
                                                  }
                                                  return SizedBox();
                                                }),
                                                InkWell(
                                                  onTap: () => logic.addToCart(food),
                                                  child: Container(
                                                    padding: EdgeInsets.all(4),
                                                    decoration: BoxDecoration(
                                                      color: backgroundColor,
                                                      shape: BoxShape.circle,
                                                    ),
                                                    child: Icon(Icons.add, size: 16, color: Colors.white),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    }),
                  ),
                ),
              ],
            ),
          ),

          // 底部购物车
          Obx(() => Container(
            color: Colors.white.withOpacity(0.9),
            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: SafeArea(
              child: Row(
                children: [
                  Stack(
                    alignment: Alignment.topRight,
                    children: [
                      IconButton(
                        icon: Icon(Icons.shopping_cart, size: 28, color: backgroundColor),
                        onPressed: () {
                          // 展示购物车详情
                          logic.showCartDetails();
                        },
                      ),
                      if (logic.cartItems.isNotEmpty)
                        Container(
                          padding: EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.circle,
                          ),
                          child: Text(
                            '${logic.cartItems.length}',
                            style: TextStyle(color: Colors.white, fontSize: 10),
                          ),
                        ),
                    ],
                  ),
                  SizedBox(width: 8),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        '总计: ¥${logic.totalPrice.value.toStringAsFixed(2)}',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                        ),
                      ),
                      Text(
                        '配送费: ¥5.00',
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.grey,
                        ),
                      ),
                    ],
                  ),
                  Spacer(),
                  ElevatedButton(
                    onPressed: logic.cartItems.isEmpty ? null : () {
                      // 提交订单
                      logic.submitOrder();
                    },
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                      backgroundColor: backgroundColor,
                      disabledBackgroundColor: Colors.grey,
                    ),
                    child: Text('去结算', style: TextStyle(color: Colors.white)),
                  ),
                ],
              ),
            ),
          )),
        ],
      ),
    );
  }
}